<template>
  <div style="position: relative">
    <!-- <h1 class="title">组策略</h1> -->
    <HETTable1
      ref="groupStrategyTable"
      :tableData="data.tableData"
      :tHead="data.tHead"
      :total="data.total"
      @getTableData="getGroupStrategyList"
    >
      <template #type>
        <el-table-column label="策略类型">
          <template #default="scope">
            {{ policyType(scope.row.type) }}
            <!-- {{  scope.row.type}} -->
          </template>
        </el-table-column>
      </template>
      <template #status>
        <el-table-column label="部署状态">
          <template #default="scope">
            {{
              scope.row.status == 0
                ? "待部署"
                : scope.row.status == 1
                ? "部署中"
                : scope.row.status == 2
                ? "部署成功"
                : "部署失败"
            }}
          </template>
        </el-table-column>
      </template>
      <template #operation>
        <el-table-column label="操作">
          <template #default="scope">
            <!--            <el-button-->
            <!--              @click="-->
            <!--                dialogAsync = true;-->
            <!--                categoryId = scope.row.categoryId;-->
            <!--                strategyType = scope.row.type;-->
            <!--              "-->
            <!--              >详情</el-button-->
            <!--            >-->
            <el-text @click="cancelDeploy(scope.row)" :type="scope.row.status != 0 ? '' : 'primary'" :class="scope.row.status != 0 ? 'not-text' : 'cursor-pointer'"
              >取消下发
            </el-text>
          </template>
        </el-table-column>
      </template>
    </HETTable1>
    <el-dialog
      :model-value="dialogAsync"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :center="true"
      title="部署详情"
      width="60%"
      @close="dialogAsync = false"
    >
      <div class="config-body">
        <HETTable1
          ref="groupStrategyDetailTable"
          :tableData="dialogTableData"
          :tHead="dialogTableHead"
          :total="dialogTableTotal"
          @getTableData="getGroupStrategyDetail"
        >
          <template #status>
            <el-table-column label="部署状态">
              <template #default="scope">
                {{
                  scope.row.status == 0
                    ? "待部署"
                    : scope.row.status == 1
                    ? "部署中"
                    : scope.row.status == 2
                    ? "部署成功"
                    : "部署失败"
                }}
              </template>
            </el-table-column>
          </template>
        </HETTable1>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { Plus, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useTreeStore } from "~/utils/pinia/tree.js";
import {
  req_getGroupStrategyList,
  req_delGroupStrategy,
  req_groupStrategyDetail,
  req_getCategorySetting,
} from "~/utils/axios/index.js";

const treeStore = useTreeStore();
treeStore.openTree();
const groupStrategyTable = ref();
treeStore.treeLinkedTableRef = groupStrategyTable;
const groupStrategyDetailTable = ref();
const dialogAsync = ref(false);
const categoryId = ref();
const strategyType = ref();
const dialogTableData = ref([]);
const dialogTableHead = ref([
  {
    label: "策略名称",
    prop: "strategyName",
    isCustom: false,
  },
  {
    label: "策略类型",
    prop: "type",
    isCustom: true,
    slotName: "type",
  },
  {
    label: "设备名称",
    prop: "name",
    isCustom: false,
    // width: 200,
  },
  {
    label: "设备IP",
    prop: "ip",
    isCustom: false,
    // width: 230,
  },
  {
    label: "部署状态",
    prop: "status",
    isCustom: true,
    slotName: "status",
  },
  {
    label: "创建时间",
    prop: "createTime",
    isCustom: false,
  },
  {
    label: "部署成功时间",
    prop: "deployTime",
    isCustom: false,
  },
]);
const dialogTableTotal = ref(0);
const policyType = computed(() => (type) => {
  return treeStore.treeStrategyTypeList.find((item) => item.name == type)?.desc || type;
});
onMounted(() => {});
// 删除
const cancelDeploy = (row) => {
  if(row.status != 0){
    return
  }
  ElMessageBox.confirm("确定要取消部署该策略？", "取消部署", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    center: true,
    closeOnClickModal: false,
  }).then(() => {
    req_delGroupStrategy({
      categoryId: row.categoryId,
      type: row.type,
      oid: row.oid,
    }).then((res) => {
      res.data.succeed ? ElMessage.success("操作成功") : ElMessage.success("操作失败");
      groupStrategyTable.value.getTableData();
    });
  });
};
const data = reactive({
  dialogAsync: false,
  tHead: [
    {
      label: "策略名称",
      prop: "strategyName",
      isCustom: false,
    },
    {
      label: "策略类型",
      prop: "type",
      isCustom: true,
      slotName: "type",
      width: 300,
    },
    {
      label: "设备名称",
      prop: "name",
      isCustom: false,
      // width: 200,
    },
    {
      label: "设备IP",
      prop: "ip",
      isCustom: false,
      // width: 230,
    },
    {
      label: "部署状态",
      prop: "status",
      isCustom: true,
      slotName: "status",
    },
    {
      label: "创建时间",
      prop: "createTime",
      isCustom: false,
      width: 200,
    },
    {
      label: "部署时间",
      prop: "deployTime",
      isCustom: false,
      width: 200,
    },
    {
      label: "操作",
      prop: "operation",
      isCustom: true,
      slotName: "operation",
    },
  ],
  tableData: [],
  total: null,
});

// 获取表格数据
const getGroupStrategyList = async (initTableParams, $filter) => {
  groupStrategyTable.value.loading();
  let promise, params;
  if (treeStore.treeDeviceId) {
    params = {
      deviceId: treeStore.treeDeviceId,
      start: initTableParams.page * initTableParams.size,
      size: initTableParams.size,
    };
    promise = req_getGroupStrategyList(params);
  } else {
    if (treeStore.treeLinkedTableCategoryId == null) {
      params = {
        categoryId: 1,
        start: initTableParams.page * initTableParams.size,
        size: initTableParams.size,
      };
    } else {
      params = {
        categoryId: treeStore.treeLinkedTableCategoryId,
        start: initTableParams.page * initTableParams.size,
        size: initTableParams.size,
      };
    }
    promise = req_getCategorySetting(params);
  }

  try {
    const { data: res } = await promise;
    groupStrategyTable.value.finish();
    if (res.succeed) {
      data.tableData = [];
      data.total = 0;
    } else {
      data.tableData = res.data;
      data.total = res.total;
    }
  } catch (err) {
    groupStrategyTable.value.finish();
  }
};

const getGroupStrategyDetail = async () => {
  groupStrategyDetailTable.value.loading();
  try {
    const { data: res } = await req_groupStrategyDetail({
      categoryId: categoryId.value,
      type: strategyType.value,
    });
    groupStrategyDetailTable.value.finish();
    dialogTableData.value = res;
    dialogTableTotal.value = res.length;
  } catch (err) {
    groupStrategyDetailTable.value.finish();
  }
};
</script>

<style lang="scss" scoped>
.func {
  position: absolute;
  top: 43px;
  left: 0;
}
</style>
